<script setup>
import {computed} from 'vue';
import {clsx} from 'clsx';
import {twMerge} from 'tailwind-merge';

// Disable attribute inheritance to manually bind them to the textarea

defineOptions({
  inheritAttrs: false,
});

// Define props for v-model
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
});

// Define emits for v-model
const emit = defineEmits(['update:modelValue']);

// cn utility function
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// Computed property to handle the input event
const onInput = (event) => {
  emit('update:modelValue', event.target.value);
};

</script>

<template>
  <textarea
    :class="cn(
      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
      $attrs.class
    )"
    :value="modelValue"
    v-bind="$attrs"
    @input="onInput"
  />
</template>
